<!--库位细节-->
<template>
    <el-descriptions :title="info.setName" column="3">
        <template #extra>
            <div>
                <el-link style="margin-right: 30px" type="primary" @click="handleAdd">{{
                    isEdit ? '保存' : '编辑'
                    }}
                </el-link>
                <el-link type="primary" @click="handleDeleteSetArea">删除</el-link>
            </div>
        </template>
        <el-descriptions-item label="库位编号" width="100">
            <div v-if="isEdit">
                <input class="input-box" v-model="ste.setCode"/>
            </div>
            <div v-else>{{ info.setCode }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="库位名称" width="100">
            <div v-if="isEdit">
                <input class="input-box" v-model="ste.setName"/>
            </div>
            <div v-else>{{ info.setName }}</div>

        </el-descriptions-item>
        <el-descriptions-item label="库位面积" width="100">
            <div v-if="isEdit">
                <input class="input-box" v-model="ste.setArea"/>
            </div>
            <div v-else>{{ info.setArea }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="库位状态" width="100">
            <div v-if="!isEdit">
                <el-switch
                    v-model="info.setStatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="启用"
                    inactive-text="禁用"
                    disabled
                    :active-value="1"
                    :inactive-value="0"
                />
            </div>
            <el-switch v-else
                v-model="ste.setStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
            />
        </el-descriptions-item>
        <el-descriptions-item label="库位备注" width="100">
            <div v-if="isEdit">
                <input class="input-box" v-model="ste.setRemark"/>
            </div>
            <div v-else>{{ info.setRemark }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="库位坐标" width="100">
            <el-descriptions>
                <el-descriptions-item label="x" width="100">
                    <div v-if="isEdit">
                        <input class="input-box" v-model="ste.setX"/>
                    </div>
                    <div v-else>{{ info.setX }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="y" width="100">
                    <div v-if="isEdit">
                        <input class="input-box" v-model="ste.setY"/>
                    </div>
                    <div v-else>{{ info.setY }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="z" width="100">
                    <div v-if="isEdit">
                        <input class="input-box" v-model="ste.setZ"/>
                    </div>
                    <div v-else>{{ info.setZ }}</div>
                </el-descriptions-item>
            </el-descriptions>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script>
import wareAreaSetAPI from "@/util/request-md/ware/ware-area-set.js";

export default {
    emits: ["callOperationSuccess"],
    props: ['info'],
    name: "SteView",
    data() {
        return {
            isEdit: false,
            ste: {
                wareAreaId: -1,
                setCode: '',
                setName: '',
                setId: 0,
                setArea: 0,
                setRemark: '',
                setStatus: 1,
                setX: 0,
                setY: 0,
                setZ: 0
            },
        }
    },
    methods: {
        handleAdd() {
            if (this.isEdit) {
                console.log(this.ste,">>>>this.ste")
                wareAreaSetAPI.updateWareAreaSet(this.ste, (res) => {
                    if (res.code === 200) {
                        this.$message.success('保存成功');
                        this.$emit("callOperationSuccess");
                    }
                })
            } else {
                this.ste = {
                    wareAreaId: this.info.wareAreaId,
                    setCode: this.info.setCode,
                    setName: this.info.setName,
                    setId: this.info.setId,
                    setArea: this.info.setArea,
                    setRemark: this.info.setRemark,
                    setStatus: this.info.setStatus,
                    setX: this.info.setX,
                    setY: this.info.setY,
                    setZ: this.info.setZ,
                }
            }
            this.isEdit = !this.isEdit;
        },
        handleDeleteSetArea() {
            wareAreaSetAPI.deleteWareAreaSet(this.info, (res) => {

                if (res.code === 200) {
                    this.$message.success('删除成功');
                    this.$emit("callOperationSuccess");
                } else {
                    this.$message.error(`网络异常:${res.code}->${res.data}`);
                }
            })
        }
    },
}
</script>

<style scoped>
.input-box {
    /* 去除默认样式 */
    border: none;
    outline: none;
    background-color: transparent; /* 使背景透明 */
    font-size: 14px; /* 设置字体大小 */
    padding: 8px; /* 设置内边距 */
    width: 90%;
    border-bottom: 1px solid #e1e1e1; /* 添加底部边框 */
    transition: border-bottom-color 0.3s; /* 添加过渡效果 */

}

/* 当输入框获取焦点时改变底部边框颜色 */
.input-box:focus {
    border-bottom-color: #007bff; /* 举例：蓝色 */
}
</style>